<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        {include file="public/static" /}

        <link rel="stylesheet" href="__components__/eleTree/eleTree.css" media="all">
		<style>
            .ele5{
                width: 95%;
            }
        </style>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                  <div class="layui-form-item">
                      <label for="name" class="layui-form-label">
                          <span class="x-red">*</span>姓名
                      </label>
                      <div class="layui-input-inline">
                          <input type="text" id="name" name="name" value="" lay-verify="name"
                          autocomplete="off" class="layui-input">
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="name" class="layui-form-label">
                          <span class="x-red">*</span>登录账号
                      </label>
                      <div class="layui-input-inline">
                          <input type="text" id="usernum" name="usernum" value="" lay-verify="usernum"
                          autocomplete="off" class="layui-input">
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="name" class="layui-form-label">
                          <span class="x-red">*</span>联系方式
                      </label>
                      <div class="layui-input-inline">
                          <input type="text" id="phone" name="phone" value="" lay-verify="phone"
                          autocomplete="off" class="layui-input">
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="name" class="layui-form-label">
                          <span class="x-red">*</span>密码
                      </label>
                      <div class="layui-input-inline">
                          <input type="password" id="password" name="password" value="" lay-verify="password"
                          autocomplete="off" class="layui-input">
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="name" class="layui-form-label">
                          <span class="x-red">*</span>角色
                      </label>
                      <div class="layui-input-inline">
                          <input type="hidden" id="roleId" name="roleId" value="" />
                          <input type="text" readonly name="role" placeholder="选择角色" autocomplete="off" class="layui-input" value="" />

                          <div class="eleTree ele5" lay-filter="data5"></div>
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="name" class="layui-form-label">
                          <span class="x-red">*</span>状态
                      </label>
                      <div class="layui-inline">
                          <select name="status" id="status">
                              <option value="1" selected >启用</option>
                              <option value="0" >禁用</option>
                          </select>
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="status" class="layui-form-label">
                          <span class="x-red">*</span>省份
                      </label>
                      <div class="layui-inline">
                          <select lay-filter="province" lay-verify="province" level="2" name="province" id="province">
                              <option value="">选择省份</option>
                              {volist name="province" id="vo"}
                                <option value="{$vo.ci_id}" {eq name="Request.param.province" value="$vo.ci_id"} selected {/eq}>{$vo.ci_name}</option>
                              {/volist}
                          </select>
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="status" class="layui-form-label">
                          <span class="x-red">*</span>城市
                      </label>
                      <div class="layui-inline">
                          <select lay-filter="city" lay-verify="city" level="3" name="city" id="city">
                              <option value="">选择城市</option>
                          </select>
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="status" class="layui-form-label">
                          <span class="x-red">*</span>区县
                      </label>
                      <div class="layui-inline">
                          <select lay-filter="town" lay-verify="town" name="town" id="town">
                              <option value="">选择区县</option>
                          </select>
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="L_repass" class="layui-form-label">
                      </label>
                      <button class="layui-btn" lay-filter="add" lay-submit="">提交</button>
                  </div>
              </form>
            </div>
        </div>
        <script>
            /**加载城市*/
            common.getCity('province',"{:url('Index/getCityList')}");
            /**加载区县*/
            common.getCity('city',"{:url('Index/getCityList')}");
            /**树形组件获取分类列表*/
            const list = common.getTreeMenuList("{:url('Admin/getChildAuthGroupList')}");
            const info = {name:"role", className:".ele5", nodeClick:"data5", inputId: "#roleId"};
            common.treeMenu(list, info);
            /**验证与提交*/
            layui.use(['form', 'layer'], function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;
                //自定义验证规则
                form.verify({
                    //名称
                    name: function(value) {
                        if (value.length < 2) {
                            return '姓名不能小于2个字';
                        }
                        if(/^\d+\d$/.test(value)){
                            return '姓名不能全为数字';
                        }
                        if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                            return '姓名不能有特殊字符';
                        }
                    },
                    usernum: function(value) {
                        if (value.length < 6) {
                            return '用户账号不能小于6位';
                        }
                        if(/(^\_)|(\__)|(\_+$)/.test(value)){
                            return '用户名首尾不能出现下划线\'_\'';
                        }
                        if(/^\d+\d+\d$/.test(value)){
                            return '用户名不能全为数字';
                        }
                    },
                    password: function(value) {
                        if (value.length < 6) {
                            return '密码不能小于6位';
                        }
                        if(/^\d+\d+\d$/.test(value)){
                            return '密码不能全为数字';
                        }
                    },
                    role:function (value) {
                        if (value == '') {
                            return '角色不能为空';
                        }
                    },
                    roleId:function (value) {
                        if (value == '') {
                            return '没有该角色';
                        }
                    },
                    province:function (value) {
                        if (value == '') {
                            return '省份不能为空';
                        }
                    },
                    city:function (value) {
                        if (value == '') {
                            return '城市不能为空';
                        }
                    },
                    town:function (value) {
                        if (value == '') {
                            return '区县不能为空';
                        }
                    }
                });
                //监听提交
                form.on('submit(add)', function(data) {
                    var index = layer.load();
                    //发异步，把数据提交给php
                    $.ajax({
                        type:"post",
                        url:"{:url('Admin/adminAdd')}",
                        data: data.field,
                        dataType: 'json',
                        success:function (data) {
                            if(data.status === 1){
                                layer.msg(data.info, {icon: 6,time:1500}, function() {
                                    /*关闭弹出层并刷新*/
                                    common.closeWindowReload();
                                });
                            }else{
                                layer.msg(data.info, {icon: 5,time:1500});
                            }
                            layer.close(index);
                        },
                        error:function (data) {
                            console.log(data);
                            layer.msg("不好意思，出现了一点问题", {icon: 5});
                        }
                    });
                    //必须加上return false，不然无法关闭iframe
                    return false;
                });
            });
        </script>
    </body>
</html>
